// view/index/study/study.js
let app = getApp()
let yuming = app.globalData.yuming
const request = require('../../config/request');
Page({
  ...request,
  /**
   * 页面的初始数据
   */
  data: {
    yuming: yuming,
    heights: '',
    title: "",
    erwei: '', //有域名的小程序码
    ers: '', //没有域名
    areaName: '', //地区
    tu: yuming + 'static/applet/images/bo/gonggao.png', //警察
    tus: '',
    windowWidth: 0, // 可使用窗口宽度
    windowHeight: 0, // 可使用窗口高度
    ratio: 0, // 根据尺寸动态计算 1px换算成多少rpx
    jcw: '', //警察图片的宽
    jcg: '', //警察高
    canvasW: 1500, //canvas宽
    canvasH: 2200, //canvas高
    canvasHidden: false,
    aaa: 1,
    gsbpj: yuming + 'static/applet/images/sss/index/ggltj.png',
    syyzz: yuming + 'static/applet/images/sss/index/syyzz.png',
    sxkz: yuming + 'static/applet/images/sss/index/sxkz.png',
    scns: yuming + 'static/applet/images/sss/index/scns.png',
    glzd: yuming + 'static/applet/images/sss/index/glzd.png',
    xiazai: false,
    staff: []
  },
  downLoad: function (e) {
    var that = this;
    wx.showLoading({
      title: '正在生成图片',
    })
    // 静态 二维码
    wx.downloadFile({
      url: that.data.erwei,
      success: function (res3) {
        that.setData({
          ersa: res3.tempFilePath
        })
        // 获取图片大小
        wx.getImageInfo({
          src: that.data.ers,
          success: data => {
            that.setData({
              jcw: data.width,
              jcg: data.height
            })
          }
        });
        //营业执照
        wx.downloadFile({
          url: that.data.xin.businessLicense,
          success: function (res3) {
            that.setData({
              syyzzs: res3.tempFilePath,
            })
            // 许可证
            wx.downloadFile({
              url: that.data.xin.licenceImg,
              success: function (res3) {
                that.setData({
                  sxkzs: res3.tempFilePath,
                })
                // 承诺书
                wx.downloadFile({
                  url: that.data.scns,
                  success: function (res3) {
                    that.setData({
                      scnss: res3.tempFilePath,
                    })
                    // 管理制度
                    wx.downloadFile({
                      url: that.data.glzd,
                      success: function (res3) {
                        that.setData({
                          glzds: res3.tempFilePath,
                        })
                        // 公示牌背景
                        wx.downloadFile({
                          url: that.data.gsbpj,
                          success: function (res3) {
                            that.setData({
                              gsbpjs: res3.tempFilePath,
                            })
                            if (that.data.shopStaff.length != 0) {
                              let staff = [];
                              // 健康证第一张
                              for (let i = 0; i < that.data.shopStaff.length; i++) {
                                if (that.data.shopStaff[i].healthyImage != null) {
                                  wx.downloadFile({
                                    url: that.data.shopStaff[i].healthyImage,
                                    success: function (res3) {
                                      staff.push(res3.tempFilePath);
                                      console.log(staff);
                                      that.setData({
                                        staff,
                                      })
                                      if (i == that.data.shopStaff.length - 1) {
                                        setTimeout(() => {
                                          that.createCanvasShareImage();
                                        }, 1000)
                                      }
                                    }
                                  })
                                } else {
                                  console.log(i == that.data.shopStaff.length - 1);
                                  if (i == that.data.shopStaff.length - 1) {
                                    setTimeout(() => {
                                      that.createCanvasShareImage();
                                    }, 1000)
                                  } else {
                                    continue;
                                  }
                                }
                              }
                            } else {
                              setTimeout(() => {
                                that.createCanvasShareImage();
                              }, 1000)
                            }
                          }
                        })
                      }
                    })
                  }
                })
                // if (that.data.shopStaff.length == 2) {
                //   // 健康证第一张
                //   wx.downloadFile({
                //     url: that.data.shopStaff[0].healthyImage,
                //     success: function (res3) {
                //       that.setData({
                //         shopStaffone: res3.tempFilePath,
                //       })
                //       // 健康证第二张
                //       wx.downloadFile({
                //         url: that.data.shopStaff[1].healthyImage,
                //         success: function (res3) {
                //           that.setData({
                //             shopStafftwo: res3.tempFilePath,
                //           })
                //           // 承诺书
                //           wx.downloadFile({
                //             url: that.data.scns,
                //             success: function (res3) {
                //               that.setData({
                //                 scnss: res3.tempFilePath,
                //               })
                //               // 管理制度
                //               wx.downloadFile({
                //                 url: that.data.glzd,
                //                 success: function (res3) {
                //                   that.setData({
                //                     glzds: res3.tempFilePath,
                //                   })
                //                   // 公示牌背景
                //                   wx.downloadFile({
                //                     url: that.data.gsbpj,
                //                     success: function (res3) {
                //                       that.setData({
                //                         gsbpjs: res3.tempFilePath,
                //                       })
                //                       that.createCanvasShareImage();
                //                     }
                //                   })
                //                 }
                //               })
                //             }
                //           })
                //         }
                //       })
                //     }
                //   })
                // }
                // if (that.data.shopStaff.length == 3) {
                //   // 健康证第一张
                //   wx.downloadFile({
                //     url: that.data.shopStaff[0].healthyImage,
                //     success: function (res3) {
                //       that.setData({
                //         shopStaffone: res3.tempFilePath,
                //       })
                //       // 健康证第二张
                //       wx.downloadFile({
                //         url: that.data.shopStaff[1].healthyImage,
                //         success: function (res3) {
                //           that.setData({
                //             shopStafftwo: res3.tempFilePath,
                //           })
                //           // 健康证第三张
                //           wx.downloadFile({
                //             url: that.data.shopStaff[2].healthyImage,
                //             success: function (res3) {
                //               that.setData({
                //                 shopStaffthree: res3.tempFilePath,
                //               })
                //               // 承诺书
                //               wx.downloadFile({
                //                 url: that.data.scns,
                //                 success: function (res3) {
                //                   that.setData({
                //                     scnss: res3.tempFilePath,
                //                   })
                //                   // 管理制度
                //                   wx.downloadFile({
                //                     url: that.data.glzd,
                //                     success: function (res3) {
                //                       that.setData({
                //                         glzds: res3.tempFilePath,
                //                       })
                //                       // 公示牌背景
                //                       wx.downloadFile({
                //                         url: that.data.gsbpj,
                //                         success: function (res3) {
                //                           that.setData({
                //                             gsbpjs: res3.tempFilePath,
                //                           })
                //                           that.createCanvasShareImage();
                //                         }
                //                       })
                //                     }
                //                   })
                //                 }
                //               })
                //             }
                //           })
                //         }
                //       })
                //     }
                //   })
                // }
                // if (that.data.shopStaff.length == 4) {
                //   // 健康证第一张
                //   wx.downloadFile({
                //     url: that.data.shopStaff[0].healthyImage,
                //     success: function (res3) {
                //       that.setData({
                //         shopStaffone: res3.tempFilePath,
                //       })
                //       // 健康证第二张
                //       wx.downloadFile({
                //         url: that.data.shopStaff[1].healthyImage,
                //         success: function (res3) {
                //           that.setData({
                //             shopStafftwo: res3.tempFilePath,
                //           })
                //           // 健康证第三张
                //           wx.downloadFile({
                //             url: that.data.shopStaff[2].healthyImage,
                //             success: function (res3) {
                //               that.setData({
                //                 shopStaffthree: res3.tempFilePath,
                //               })
                //               // 健康证第四张
                //               wx.downloadFile({
                //                 url: that.data.shopStaff[3].healthyImage,
                //                 success: function (res3) {
                //                   that.setData({
                //                     shopStafffour: res3.tempFilePath,
                //                   })
                //                   // 承诺书
                //                   wx.downloadFile({
                //                     url: that.data.scns,
                //                     success: function (res3) {
                //                       that.setData({
                //                         scnss: res3.tempFilePath,
                //                       })
                //                       // 管理制度
                //                       wx.downloadFile({
                //                         url: that.data.glzd,
                //                         success: function (res3) {
                //                           that.setData({
                //                             glzds: res3.tempFilePath,
                //                           })
                //                           // 公示牌背景
                //                           wx.downloadFile({
                //                             url: that.data.gsbpj,
                //                             success: function (res3) {
                //                               that.setData({
                //                                 gsbpjs: res3.tempFilePath,
                //                               })
                //                               that.createCanvasShareImage();
                //                             }
                //                           })
                //                         }
                //                       })
                //                     }
                //                   })
                //                 }
                //               })
                //             }
                //           })
                //         }
                //       })
                //     }
                //   })
                // }
              }
            })
          }
        })

      }
    })
  },
  backs() {
    wx.navigateBack({
      delta: 1
    })
  },
  // 信息
  xinxi() {
    // businessLicense 营业执照
    // licenceImg 许可证
    this.myRequest(yuming + 'shop/ShopFindColumn', {
      shopId: wx.getStorageSync('shopId')
    }, "POST").then(res => {
      if (!res.data.shop) {
        wx.showToast({
          title: '请先上传许可证',
          icon: 'none'
        })
      
        setTimeout(function () {
          wx.navigateTo({
            url: '../../page_one/xgdp/xgdp?currtab=1',
          })
        }, 1000)
      } else {
        this.setData({
          xin: res.data.shop,
          shopStaff: res.data.shopStaff, //健康证
        })
        this.erwe()
      }
    })
  },
  // 二维码
  erwe() {
    var that = this
    this.myRequest(yuming + 'Besall/fromAppletQrimg', {
      shopId: wx.getStorageSync('shopId'),
      scene: wx.getStorageSync('shopId') + '_0',
      page: 'pages/zhifu/zhifu',
      from: 'Consumer',
      // colour: 'white'
    }, "POST").then(res => {
      that.setData({
        erwei: res.data.data,
        // areaName: res.data.shop.areaName,
      })
      that.downLoad()
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      heights: wx.getMenuButtonBoundingClientRect().top + 5,
      title: options.title,
      gao: wx.getMenuButtonBoundingClientRect().top + 20
    })
    this.xinxi()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 获取系统信息
    wx.getSystemInfo({
      success: res => {
        // console.log(res);
        this.setData({
          windowWidth: res.windowWidth * 1.5,
          windowHeight: res.windowHeight,
        });
        this.setData({
          // 屏幕宽度 375px = 750rpx，1px=2rpx
          // 1px = （750 / 屏幕宽度）rpx；
          // 1rpx = （屏幕宽度 / 750）px;
          ratio: 750 / this.data.windowWidth
        });
      }
    });
  },
  createCanvasShareImage: function () {
    console.log('createCanvasShareImage');
    let context = wx.createCanvasContext('shareCanvas' + this.data.aaa);
    let canvasWidthPx = 700 / this.data.ratio;
    var windowWidth = this.data.windowWidth //手机宽
    var windowHeight = this.data.windowHeight //手机搞
    var canvasheight = this.data.jcg + 50

    // x轴
    var pagex = 80
    var pagey = 240
    // canvas背景色
    context.fillStyle = '#fff';
    context.fillRect(0, 0, this.data.canvasW, this.data.canvasH);
    // 头部
    context.fillStyle = "rgb(36,78,238)";
    context.fillRect(0, 0, this.data.canvasW, 50 * this.data.ratio * 3);
    context.setFontSize(80);
    context.fillStyle = "#fff";

    let txtWidth = context.measureText(this.data.areaName + '食品安全动态智慧监管公示牌').width;
    // 绘制居中文本：这个地方的 (x, y)的坐标是在文本的左下角位置
    context.fillText(this.data.areaName + "食品安全动态智慧监管公示牌", (this.data.canvasW - txtWidth) / 2, 95 * this.data.ratio);


    // 图片的宽 高
    var phowid = 650
    var phohei = 840
    var youx = 780
    var xiay = 1100
    // 营业执照  上左
    context.drawImage(this.data.syyzzs, pagex, pagey, phowid, phohei);
    // licenceImg 许可证 上右
    context.drawImage(this.data.sxkzs, youx, pagey, phowid, 400);

    // 健康证文字
    var jkzhei = 160
    var onepaiy = 720
    var erpaiy = 915
    var kuan = 320
    var erer = 1110

    context.fillStyle = "rgb(36,78,238)";
    context.fillRect(youx, 650, phowid, 40);
    var str = '健康证'
    context.setFontSize(26);
    context.fillStyle = "#fff";
    context.fillText(str, 1050, 680, (phowid - context.measureText(str).width) / 2, 0);

    console.log(this.data.staff);
    this.data.staff.forEach((item, index) => {
      console.log(item, index);
      if (index == 0) {
        context.drawImage(item, youx, onepaiy, kuan, jkzhei);
      }
      if (index == 1) {
        context.drawImage(item, erer, onepaiy, kuan, jkzhei);
      }
      if (index == 2) {
        context.drawImage(item, youx, erpaiy, kuan, jkzhei);
      }
      if (index == 3) {
        context.drawImage(item, erer, erpaiy, kuan, jkzhei);
      }
      if (index > 3) {
        return;
      }
    })
    // if (this.data.shopStaff.length == 1) {
    //   // 健康证 第一张
    //   context.drawImage(item, youx, onepaiy, kuan, jkzhei);
    // }
    // if (this.data.shopStaff.length == 2) {
    //   // 健康证 第一张
    //   context.drawImage(this.data.shopStaffone, youx, onepaiy, kuan, jkzhei);
    //   // 健康证 第二张
    //   context.drawImage(this.data.shopStafftwo, erer, onepaiy, kuan, jkzhei);
    // }

    // if (this.data.shopStaff.length == 3) {
    //   // 健康证 第一张
    //   context.drawImage(this.data.shopStaffone, youx, onepaiy, kuan, jkzhei);
    //   // 健康证 第二张
    //   context.drawImage(this.data.shopStafftwo, erer, onepaiy, kuan, jkzhei);
    //   // 健康证 第三张
    //   context.drawImage(this.data.shopStaffthree, youx, erpaiy, kuan, jkzhei);
    // }

    // if (this.data.shopStaff.length == 4) {
    //   // 健康证 第一张
    //   context.drawImage(this.data.shopStaffone, youx, onepaiy, kuan, jkzhei);
    //   // 健康证 第二张
    //   context.drawImage(this.data.shopStafftwo, erer, onepaiy, kuan, jkzhei);
    //   // 健康证 第三张
    //   context.drawImage(this.data.shopStaffthree, youx, erpaiy, kuan, jkzhei);
    //   // 健康证 第四张
    //   context.drawImage(this.data.shopStafffour, erer, erpaiy, kuan, jkzhei);
    // }





    // 承诺书  下左
    context.drawImage(this.data.scnss, pagex, xiay, phowid, 600);
    // 管理制度  下右
    context.drawImage(this.data.glzds, youx, xiay, phowid, 600);
    // 背景图
    context.drawImage(this.data.gsbpjs, 0, 1640, 1500, 560);

    //白色圆块 
    context.arc(1300, 2000, 150, 0, 2 * Math.PI); //arc 的意思是“弧”
    context.fillStyle = "#fff"; //设置填充颜色
    context.fill(); //开始填充
    context.strokeStyle = "#fff"; //将线条颜色设置为蓝色
    context.stroke(); //stroke() 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。
    // 小程序码
    context.drawImage(this.data.ersa, 1180, 1880, 250, 250);
    context.draw();
    wx.hideLoading({})
    this.setData({
      xiazai: true
    })
  },
  saveShareImage() {
    this.setData({
      canvasHidden: true,
      xiazai: false
    })
    wx.showLoading({
      title: '合成中...',
    })
    var that = this
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'shareCanvas' + that.data.aaa,
        success: (res) => {
          console.log('canvasToTempFilePath： ', res);
          that.data.aaa++;
          that.setData({
            aaa: that.data.aaa
          })
          // 将图片保存到相册
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: (data) => {
              console.log(data);
              wx.showToast({
                title: '保存成功',
                icon: 'none'
              })
              setTimeout(function () {
                that.erwe()
                that.setData({
                  canvasHidden: false
                })
              }, 100)
            },
            fail(err) {
              wx.showToast({
                title: '保存失败',
                icon: 'none'
              })
              setTimeout(function () {
                that.erwe()
                that.setData({
                  canvasHidden: false
                })
              }, 100)
            }
          });

          // 直接预览图片
          // wx.previewImage({
          //   urls: [res.tempFilePath]
          // })
        }
      })
    }, 1000)
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
})